<!--
 * @file 
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2021/07/30
-->
<template>
    <div class="tinymce-editor">
        <editor
            v-model="myValue"
            :init="init"
            :disabled="disabled"
            @onClick="onClick"
        ></editor>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
// 用了自己处理过的插件
// import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/link'
import 'tinymce/plugins/print'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/code'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/help'
// 自己处理的插件
import './plugins/formatpainter.js'
import './plugins/image.js'
import './plugins/test.js'

export default defineComponent({
    name: 'SchEditor',
    components: {
        Editor
    },
    props: {
        value: {
            type: String,
            required: false
        },
        triggerChange: {
            type: Boolean,
            default: false,
            required: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default: function () {
                return [
                    'advlist autolink lists link image charmap print preview',
                    'searchreplace visualblocks fullscreen',
                    'insertdatetime media table code help wordcount formatpainter test'
                ]
            }
        },
        toolbar: {
            type: [String, Array],
            default:
                'undo redo ' + 
                '| fontselect ' + 
                '| fontsizeselect ' + 
                '| formatselect ' + 
                '| lineheight bold italic forecolor backcolor formatpainter ' +
                '| alignleft aligncenter alignright alignjustify ' +
                '| bullist numlist outdent indent ' +
                '| image media table link charmap insertdatetime ' + 
                '| searchreplace preview visualblocks code wordcount print ' + 
                '| removeformat help fullscreen | test'
        }
    },
    data() {
        return {
            //初始化配置
            init: {
                language_url: '/tinymce/langs/zh_CN.js',
                language: 'zh_CN',
                skin_url: '/tinymce/skins/lightgray',
                icons_url: '/tinymce/icons.js', // load icon pack
                icons: 'test',
                height: 300,
                plugins: this.plugins,
                toolbar: this.toolbar,
                branding: false,
                menubar: false,
                fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", //字体大小设置
                images_upload_handler: (blobInfo, success) => {
                    const img = 'data:image/jpeg;base64,' + blobInfo.base64()
                    success(img)
                }
            },
            myValue: this.value
        }
    },
    mounted() {
        tinymce.init({})
    },
    methods: {
        /**
         * 编辑器被点击
         * @param {object} 事件源
         */
        onClick(e) {
            this.$emit('onClick', e, tinymce)
        },
        /**
         * 清空内容
         */
        clear() {
            this.myValue = ''
        }
    },
    watch: {
        value(newValue) {
            this.myValue = newValue
        },
        myValue(newValue) {
            if (this.triggerChange) {
                this.$emit('change', newValue)
            } else {
                this.$emit('input', newValue)
            }
        }
    }
})
</script>
<style scoped>
</style>
